<template>
    <!-- <div class="text">我是{{text}}页面</div> -->
    <van-search class="search" v-model="value" placeholder="请输入搜索关键词" />
    <div style="height: 50px;"></div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <van-card v-for="(item, index) in list" :key="item.id"  :price="(item.price).toFixed(2)" :desc="item.text" :title="item.name"
            :thumb="item.image" :origin-price="item.originPrice.toFixed(2)" @click="showDetail(item)">
            <!-- 价格的插槽 -->
            <template #Price>
                <Price :item="item"  />

            </template>
            <!-- 数量的插槽 -->
            <template #num>
                <div @click.stop>
                    <van-stepper v-model="item.count" />
                </div>
            </template>
            <template #tags>
                <van-tag plain type="primary">酒水</van-tag>
                <!-- <van-tag plain type="primary">标签</van-tag> -->
            </template>
            <template #footer>
                <van-button size="mini" @click.stop="addOrder(item)">立即购买</van-button>
                <van-button size="mini" @click.stop="joinCart(item)">加入购物车</van-button>
                <!-- <van-button size="mini">按钮</van-button> -->
            </template>
        </van-card>
    </van-list>
</template>

<script>
import axios from 'axios';
import { showDialog } from 'vant';
import Price from '@/components/Price.vue'
import  global  from '@/config/global.js'

export default {
    data() {
        return {
            value:'',
            loading: false,
            finished: false,
            pageNo: 0,
            pageSize: 20,
            list: []
        }
    },
    components:{
        Price,
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const ListData = await axios.post('http://localhost:6001/list/goods', {
                // $timeout:1000,
                pageNo: this.pageNo,
                paseSize: this.pageSize
            })
            // 拉了第一页的数据之后就应该拉取第二页的数据
            this.pageNo++
            // console.log(ListData.data.result.list);
            this.list = [...this.list, ...ListData.data.result.list.map(o => ({ ...o, count: 1 }))]
            // console.log(this.list);
            // 当一次获取的信息条数少于页距时，就认为数据已经全部获取完毕
            if (ListData.data.result.list.length < this.pageSize) {
                this.finished = true
            }
            this.loading = false
        },
        async joinCart(item) {
            // console.log(item);
            const params = {
                goodsId: item.id,
                cont: item.count
            }
            const res = await axios.post('http://localhost:6001/create/cart', params)
            const data = res.data
            if (!data.success) {
                return showDialog({ message: data.message })
            }
            showDialog({ message: '加入购物车成功' })
            this.$store.state.$bus.emit('refreshDetailList')

            this.$store.state.$bus.emit('refreshCartList')

        },
        showDetail(item){
            this.$router.push({path:'/detail',query:{id:item.id}})
            // console.log(1);
        },
        addOrder(item){
            global.item = item
            // console.log(global.item);
            this.$router.push({path:'/confirmOrder'})
        }
    }
}
</script>



<style scoped>
.search {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
}
</style>